<template>
    <div v-cloak>
        <div class="top-div">
            <el-row>
                <el-col :span="2">
                    <el-button  v-if="$store.state.authList.indexOf('index:flower:del')!=-1" :disabled="selectValue.length==0" icon="el-icon-delete" type="danger"
                               @click="deleteFlower(selectValue.toString())">删 除
                    </el-button>
                </el-col>
                <el-col :span="11" :push="2">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-col :span="12">
                            <el-form-item label="标题:">
                                <el-input :clearable="true" v-model="form.title" placeholder="请输入标题"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :push="2">
                            <el-form-item label="时间:">
                                <el-date-picker
                                        v-model="searchTime"
                                        type="daterange"
                                        align="right"
                                        format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        unlink-panels
                                        :clearable="true"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :picker-options="pickerOptions"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-col>
                <el-col :span="2" :push="7">
                    <el-button type="warning"  @click="search" icon="el-icon-search">搜 索</el-button>
                </el-col>
                <el-col :span="2" :push="7">
                    <el-button v-if="$store.state.authList.indexOf('index:flower:save')!=-1" type="primary" @click="addFlower" icon="el-icon-plus">添 加</el-button>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-table
                    :data="tableData"
                    border
                    @selection-change="handleSelectionChange"
                    style="width: 100%;height: calc( 100vh - 240px )">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="oldPrice"
                        label="原价"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="现价">
                </el-table-column>
                <el-table-column
                        prop="sales"
                        label="销量">
                </el-table-column>

                <el-table-column
                        prop="collectNumber"
                        label="收藏数">
                </el-table-column>
                <el-table-column
                        prop="createDate"
                        label="发布时间">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="$store.state.authList.indexOf('index:flower:del')!=-1" @click="deleteFlower(scope.row.id)" style="color: #ff0000;" type="text" size="small">
                            删除
                        </el-button>
                        <el-button v-if="$store.state.authList.indexOf('index:flower:update')!=-1" @click="handleEdite(scope.row)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="background-color: white">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[15, 20, 25, 30]"
                        :page-size="size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import flowerApi from "../../api/flowerApi";
    import util from "../../util/util";

    export default {
        name: "FlowerTable",
        data() {
            return {
                key: "",
                page: 1,
                size: 15,
                tableData: [],
                total: 0,
                selectValue: [],
                searchTime:[],
                pickerOptions: {
                    shortcuts: [{
                        text: '本月',
                        onClick(picker) {
                            picker.$emit('pick', [new Date(), new Date()]);
                        }
                    }, {
                        text: '今年至今',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date(new Date().getFullYear(), 0);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近六个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setMonth(start.getMonth() - 6);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                form: {
                    queryDate: "",
                    createDate: "",
                    title: ""
                }

            }
        },
        mounted() {
            flowerApi.query({}, this.page, this.size).then(res => {
                this.tableData = res.data.rows
                this.total = res.data.total
            })

        },
        methods: {
            //筛选方法
            search() {
                //如果为空删掉对应属性
                if (this.form.title == "")
                    delete this.form.title
                if (this.searchTime == null) {
                    delete this.form.createDate
                    delete this.form.queryDate
                } else {
                    this.form.createDate = this.searchTime[0]
                    this.form.queryDate = this.searchTime[1]
                }
                this.page = 1
                flowerApi.query(this.form, this.page, this.size).then(res => {
                    this.tableData = res.data.rows
                    this.total = res.data.total
                })
            },
            handleEdite(row) {
                this.$router.push({path: "/index/flowerAdd", query: {id: row.id}})
            },
            listFlower() {
                flowerApi.query(this.form, this.page, this.size).then(res => {
                    this.tableData = res.data.rows
                    this.total = res.data.total
                })
            },
            async deleteFlower(id) {
                let flag = await util.deleteConfirm()
                if (flag) {
                    flowerApi.delete(id).then(res => {
                        this.listFlower()
                    })
                }
            },
            handleSelectionChange(val) {
                this.selectValue = []
                val.forEach(item => {
                    this.selectValue.push(item.id)
                })
            },
            addFlower() {
                this.$router.push("/index/flowerAdd")
            },
            // 尺寸大小改变
            handleSizeChange(newSize) {
                this.size = newSize;
                this.listFlower();
            },
            // 当前页码的改变
            handleCurrentChange(newPage) {
                this.page = newPage;
                this.listFlower();
            }

        }
    }
</script>

<style scoped>
    .editor {
        line-height: normal !important;
        height: 500px;
        width: 100%;
        background-color: white;
    }
</style>